<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--引入样式文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <title>慕课网</title>
</head>

<body>

</body>
<!--顶部固定框-->
<section class="wrap_1 clearfix">
    <!--标志框和搜索登陆框-->
    <header class="header">
        <div class="img"><img src="images/logo.png" alt=""></div>
        <div class="find glyphicon glyphicon-search"></div>
        <input type="text" placeholder="搜索课程">
        <div class="sign">
            <a href="#">下载APP </a>|
            <a href="#">登陆</a>
        </div>
    </header>
    <!--导航框-->
    <nav class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">免费</a>
            </li>
            <li>
                <a href="#">实战</a>
            </li>
            <li>
                <a href="#">专栏</a>

            </li>
            <li>
                <a href="#">直播</a>
            </li>
            <li>
                <a href="#">就业</a>
            </li>
            <li>
                <a href="#">手记</a>
            </li>
            <li>
                <a href="#">猿问</a>
            </li>
        </ul>


    </nav>
</section>

<!--焦点滚动图-->
<!-- Swiper -->
<section class="wrap_2">
    <!-- Swiper -->
    <div class="swiper-container focus_fo">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="upload/focus_1.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="upload/focus_2.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="upload/focus_3.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="upload/focus_4.png" alt="">
            </div>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    </div>
</section>

<!--实战推荐-->
<section class="content">
    <!--头部区域-->
    <div class="content-hd">
        <img class="title" src="upload/title_bg1.png" alt="">
        <h4>实战推荐</h4>
        <a href="#" class="more">更多 &gt;&gt;</a>
    </div>
    <!--推荐栏-->
    <div class="intro">
        <ul>
            <li>
                <span>
                    <img src="upload/pic_3.png" alt="">
                </span>
                <div class="classes">
                    <a>Google资深工程师深度讲解Redis</a>
                    <p>中级 &nbsp;&nbsp;&nbsp;&nbsp;·</p>
                    <p class="glyphicon glyphicon-user">1938</p>
                </div>
                <div class="price">
                    <div class="now">¥299</div>
                    <div class="before">限时拼团
                        <p>¥529</p>
                    </div>
                </div>
            </li>
            <li>
                <span>
                    <img src="upload/pic_2.jpg" alt="">
                </span>
                <div class="classes">
                    <a>Vue3.0(正式版) + TS 仿知乎专栏企业级项目</a>
                    <p>中级 &nbsp;&nbsp;&nbsp;&nbsp;·</p>
                    <p class="glyphicon glyphicon-user">289</p>
                </div>
                <div class="price">
                    <div class="now">¥399</div>
                    <div class="before">限时优惠
                        <p> ¥459</p>
                    </div>
                </div>
            </li>
            <li>
                <span>
                    <img src="upload/pic_1.png" alt="">
                </span>
                <div class="classes">
                    <a>Laravel重构企业级电商项目</a>
                    <p>中级 &nbsp;&nbsp;&nbsp;&nbsp;·</p>
                    <p class="glyphicon glyphicon-user">577</p>
                </div>
                <div class="price">
                    <div class="now">¥388</div>
                    <div class="before">限时优惠
                        <p> ¥488</p>
                    </div>
                </div>
            </li>
            <li>
                <span>
                    <img src="upload/pic_4.png" alt="">
                </span>
                <div class="classes">
                    <a>前端框架及项目面试 聚焦Vue3/React/Webpack</a>
                    <p>高级 &nbsp;&nbsp;&nbsp;&nbsp;·</p>
                    <p class="glyphicon glyphicon-user">389</p>
                </div>
                <div class="price">
                    <div class="now">¥329</div>
                    <div class="before">限时优惠
                        <p> ¥399</p>
                    </div>
                </div>
            </li>
            <li>
                <span>
                    <img src="upload/pic_5.jpg" alt="">
                </span>
                <div class="classes">
                    <a>微信小程序入门与实战-2020全新版</a>
                    <p>中级 &nbsp;&nbsp;&nbsp;&nbsp;·</p>
                    <p class="glyphicon glyphicon-user">1092</p>
                </div>
                <div class="price">
                    <div class="now">¥199</div>
                    <div class="before">赢取免单听课</div>
                </div>
            </li>
    </div>
    </li>
    </ul>
    </div>
</section>

<!--就业班-->
<section class="content">
    <!--头部区域-->
    <div class="content-hd">
        <img class="title" src="upload/title-bg2.png" alt="">
        <h4>就业班</h4>
        <span>快速迈进互联网行业，轻松挑战40W年薪</span>
        <a href="#" class="more">更多 &gt;&gt;</a>
    </div>
    <!--推荐栏-->
    <div class="work">
        <ul>
            <li>
                <a href="#"><img src="upload/work_1.png" alt=""></a>
                <a href="#"><img src="upload/work_2.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/work_3.png" alt=""></a>
                <a href="#"><img src="upload/work_4.png" alt=""></a>
            </li>
        </ul>
    </div>
</section>

<!--直播课-->
<section class="content">
    <!--头部区域-->
    <div class="content-hd">
        <img class="title" src="upload/title-bg3.png" alt="">
        <h4>直播课</h4>
        <a href="#" class="more">更多 &gt;&gt;</a>
    </div>
    <!--推荐栏-->
    <div class="online">
        <div class="swiper-container online_fo">
            <div class="swiper-wrapper">
                <a class="swiper-slide">
                    <h3>百万年薪Java架构师的日常养成攻略 </h3>
                    <p class="glyphicon glyphicon-play-circle">11月3日 20:00</p>
                    <div class="teacher">
                        <div><img src="upload/teacher_1.jpg" alt=""></div>
                        <p>张飞扬 · P8级架构师</p>
                    </div>
                </a>
                <a class="swiper-slide">
                    <h3>2021前端技术趋势大解析 </h3>
                    <p class="glyphicon glyphicon-play-circle">11月8日 16:00</p>
                    <div class="teacher">
                        <div><img src="upload/teacher_2.jpg" alt=""></div>
                        <p>Brian · 全栈大牛，创业者</p>
                    </div>
                </a>
                <a class="swiper-slide">
                    <h3>告别996，开启Java高效编程之门 </h3>
                    <p class="glyphicon glyphicon-play-circle">11月16日 19:00</p>
                    <div class="teacher">
                        <div><img src="upload/teacher_3.jpg" alt=""></div>
                        <p>叁金 · JAVA开发工程师</p>
                    </div>
                </a>
                <a class="swiper-slide">
                    <h3>初识HTML(5)+CSS(3)-2020升级版 </h3>
                    <p class="glyphicon glyphicon-play-circle">11月30日 19:30</p>
                    <div class="teacher">
                        <div><img src="upload/teacher_4.jpg" alt=""></div>
                        <p>lewis · Web前端工程师</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>


<!--慕课专栏-->
<section class="content">
    <!--头部区域-->
    <div class="content-hd">
        <img class="title" src="upload/title-bg4.png" alt="">
        <h4>慕课专栏</h4>
        <a href="#" class="more">更多 &gt;&gt;</a>
    </div>
    <!--推荐栏-->
    <div class="mooc">
        <!-- Swiper -->
        <div class="swiper-container mooc_fo">
            <div class="swiper-wrapper">
                <a class="swiper-slide" style="background-image:url(./upload/mooc_1.png)"></a>
                <a class="swiper-slide" style="background-image:url(./upload/mooc_2.png)"></a>
                <a class="swiper-slide" style="background-image:url(./upload/mooc_3.png)"></a>
                <a class="swiper-slide" style="background-image:url(./upload/mooc_4.png)"></a>
                <a class="swiper-slide" style="background-image:url(./upload/mooc_5.png)"></a>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

</section>

<footer class="footer">
    <a href="#" class="item">
        <img src="./images/home.png" alt="">
        <p>首页</p>
    </a>
    <a href="#" class="item">
        <img src="./images/ms.png" alt="">
        <p>笔记博客</p>
    </a>
    <a href="#" class="item">
        <img src="./images/net.png" alt="">
        <p>实战项目</p>
    </a>
    <a href="#" class="item">
        <img src="./images/user.png" alt="">
        <p>我的主页</p>
    </a>
</footer>
<script src="js/flexible.js"></script>
<script src="js/swiper.min.js"></script>
<script>
    //焦点图自动滑动页面
    (function () {
        var swiper = new Swiper('.focus_fo', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    })();

    //直播信息滑动页面
    (function () {
        var swiper = new Swiper('.online_fo', {
            slidesPerView: 'auto',
            spaceBetween: 30,
        });
    })();

    //慕课推荐滑动页面
    (function () {
        var swiper = new Swiper('.mooc_fo', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
    })();
</script>

</html>